<template>
  <div class="visiual-screen">
    <div class="visiual-map" ref="visiualMap"></div>
    <div class="visiual-info"></div>
    <!-- <div class="swiper-container ">
      <div class="swiper-wrapper screen-swiper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
      </div>
    </div> -->
  </div>
</template>
4
<script>
// import Swiper from 'swiper'
// import 'swiper/css/swiper.css'

export default {
  mounted() {
    const AMap = window.AMap;
    let MapInstance = new AMap.Map(this.$refs.visiualMap, {
      zoom: 18, //级别
      center: [116.520,40.106510] //中心点坐标
    });

    // 多边形轮廓线的节点坐标数组
    var path = [
      new AMap.LngLat(116.503322, 39.920255),
      new AMap.LngLat(116.459242, 39.902823),
      new AMap.LngLat(116.408259, 39.86627),
      new AMap.LngLat(116.382211, 39.894789)
    ];

    var polygon = new AMap.Polygon({
      path: path,
      fillColor: "#fff", // 多边形填充颜色
      borderWeight: 1, // 线条宽度，默认为 1
      strokeColor: "red" // 线条颜色
    });
    var txt = new AMap.Text({
      text: "第一地块",
      position: AMap.LngLat(116.403322, 39.920255)
    });
    var satatileLayer = new AMap.TileLayer.Satellite();
    MapInstance.add(satatileLayer);
    MapInstance.add(txt);
    MapInstance.add(polygon);

    // var swiper = new Swiper(".screen-swiper", {
      
    // });
  }
};
</script>

<style>
/* @import url('swiper/css/swiper.css'); */
.visiual-screen,
.visiual-map,
.visiual-info {
  width: 100%;
  height: 100%;
}
.visiual-screen {
  position: relative;
}
.visiual-info {
  position: absolute;
  left: 0;
  top: 0;
  background: transparent;
  box-shadow: 0 0 100px 80px inset;
}
</style>